import React, { Component } from "react";

// HOC高阶组件（就是函数）
/* const List = (props) => {
    return (
        <ul>
            {props.data.map((item, index) => (
                <li>
                    <input type="checkbox" />
                    {item}------------------------------
                    <button onClick={this.delete(index)}>删除</button>
                </li>
            ))}
        </ul>
    );
};
const withFetch = (Com) => {
    return class A extends React.Component {
        state = { data: [] };
        render() {
            return <Com data={this.state.data} />;
        }
    };
};

const newList = withFetch(List); */

export default class Todo extends Component {
    state = { inpValue: "", arr: [] };

    inp = (type) => {
        return (e) => {
            this.setState({ [type]: e.target.value });
        };
    };
    enter = (e) => {
        if (e.keyCode === 13) {
            let val = e.target.value;
            // this.state.arr.push(e.target.value);push方法返回的是新数组的长度
            //unshift是向数组头部加一个元素
            // this.state.arr.unshift(e.target.value);
            // this.setState({ arr: this.state.arr });
            this.setState({ arr: [val, ...this.state.arr] });
        }
    };
    render() {
        return (
            <div>
                <h1>TODOLIST</h1>
                <p>正在进行的条数:{this.state.arr.length}</p>
                <input
                    value={this.state.inpValue}
                    onKeyUp={this.enter}
                    onChange={this.inp("inpValue")}
                />
                <ul>
                    {this.state.arr.map((item) => (
                        <li>{item}</li>
                    ))}
                </ul>
            </div>
        );
    }
}
